<template>
    <div class="container">
      <div class="header">
        <h3>VUE3测试项目</h3>
        <ul>
            <li v-for="item in navBarState.navList" :key="item.name">
              <span @click="jumpIndex" :class="[homeIsActive ? 'active' : '',homeClass]" v-if="item.name == '首页'">&#xe600;</span>
              <span v-else>{{ item.name }}</span>
            </li>
        </ul>
      </div>
      <div class="side-bar">
        <ul>
          <li v-for="item in subRouter" :key="item.meta.title">
          <router-link 
           :to="index_prefix + '/' + item.path" class="login link" exact
            exact-active-class="active-link">{{item.meta.title}}</router-link>
          </li>
        </ul>
      </div>
      <div class="content">
        <div class="" v-if="route.path == '/index'">
          <h1>x：{{x}}，y:{{y}}</h1>
          {{state.val}}
          <input type="text" placeholder="enter添加数据" v-model="state.val" @keyup.enter="addTodo">
          <ul>
            <li v-for="todo in state.todos" :key="todo.name">{{todo.name}}</li>
          </ul>
          <div>total:{{total}} </div>
          <Transition name="fade" mode="out-in">
            <component :is="HelloWorld" msg="父组件传过来的消息" v-if="show"></component>
          </Transition>
          <button @click="show = !show" class="button">自定义组件开关，测试过渡效果</button>
        </div>
        <router-view v-slot="{ Component}">
          <keep-alive :include="includeList">
            <component v-if="route.meta.keepAlive" :is="Component" :key="route.name"/>
          </keep-alive>
            <component v-if="!route.meta.keepAlive" :is="Component" :key="route.name"/>
          </router-view>
      </div>
      
    </div>
</template>

<script setup>
import {reactive,ref,watch} from "vue";
import {subRouter,router} from "@/router/router";
import {onBeforeRouteUpdate,useRoute} from "vue-router";
import useAddTodo from '../useAddTodo'
import useMouse from '../useMouse'
import HelloWorld from '../components/HelloWorld.vue'
const homeClass = ref("iconfont icon-home");
let homeIsActive = ref(false);
const show = ref(false); //自定义组件开关
const index_prefix = "/index";
console.log("index页面挂载了,测试keepalive")
const route = useRoute();
if(route.meta?.active && route.path == '/index') homeIsActive = true
const navBarState = reactive({
  navList:[
    {name:"首页"},
    {
      name:"任务",
    },
    {
      name:"审批",
    },
    {
      name:"项目",
    },
  ],
  curSlideComponent:null
})
function jumpIndex(){
    router.replace("/index");
}
//这里的逻辑很清晰 告别大几百行的组件
let {state,total,addTodo} = useAddTodo();
let {x,y} = useMouse();

onBeforeRouteUpdate((to,from,next)=>{
  if(to.path == (index_prefix)){
    homeIsActive = true
  }else{
    homeIsActive = false
  }
  next()
})
let includeList = reactive([]);

//监听路由
watch(route,
      (to,from) => {
        if(to.name){
          if(to.meta.keepAlive &&includeList.indexOf(to.name) === -1){
          includeList.push(to.name);
         }
        } 
      },{immediate: true,deep: true})
</script>

<style lang="less" scoped>
  .container{
    color: #fff;
    position: relative;
    .header{
      width: calc(100% -20px);
      padding: 20px 0 20px 20px;
      background: linear-gradient(to right,#3333ff,#66ffff,#fff);
      height: 30px;
      line-height: 30px;
      overflow: hidden;
      position: fixed;
      top: 0;
      width: 100%;
      z-index: 1000;
      h3{
        float: left;
        height: 30px;
        margin-right: 100px;
      }
      ul{
        overflow: hidden;
        cursor:pointer;
        li{
        float: left;
        margin-right: 20px;
       }
      }
      
    }
    .side-bar{
      width: 100px;
      background: linear-gradient(to bottom,#3333ff,#66ffff,#fff);
      position: fixed;
      left: 0;
      height: 100%;
      z-index: 100;
      .link{
        text-decoration: none;
        outline: none;	/* 去除旧版浏览器的点击后的外虚线框 */
        color: #fff;	/* 去除默认的颜色和点击后变化的颜色 */ 
        margin: 10px 0;
        display: inline-block;
        &.active-link{
          color: red;
        }
      }
    }
    .content{
      background: #FFFAFA;
      margin-top: 70px;
      padding-bottom: 20px;
      padding-top: 10px;
      color: black;
      padding-left: 100px;
      box-sizing: border-box;
    }
    .icon-home{
      color: #fff;
      padding: 0 15px;
      &.active{
        color: #FF8C00;
      }
    }
  }


  /**过渡样式 */
  .fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}
.fade-enter-from,
.fade-leave-to {
  opacity: 0;
}
</style>
